<template>
    <div class="page-detail-header">
        <div class="page-title">{{ title }}</div>
        <a-button type="link" @click="$router.back()" v-if="showBack">返回</a-button>
        <slot></slot>
    </div>
</template>
<script setup>
import { defineProps } from 'vue'
const props = defineProps({
    title: {
        type: String,
        default: '标题',
    },
    showBack: {
        type:Boolean,
        default: true
    }
})

</script>

<style scoped lang="less">
.page-detail-header {
    display: flex;
    align-items: center;
    height: 64px;
    background: #ffffff;
    padding: 0 24px;
    width: 100%;
    box-shadow: 0px 4px 4px 0px #E7EDF8;

    .page-title {
        color: #223354;
        font-family: PingFang SC;
        font-size: 18px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        padding-right: 8px;
        margin-right: 8px;
    }

    .page-title::after {
        display: block;
        content: '';
        height: 5px;
        background: linear-gradient(90deg, #07F 5.32%, rgba(255, 255, 255, 0.00) 103.53%);
    }
}
</style>